import React from 'react'
import Tabs from '@/components/Tabs'
import styles from './index.module.scss'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getAllChannels, getUserChannels } from '@/store/actions/home'
import Icon from '@/components/Icon'
import { Drawer } from 'antd-mobile-v2'
import { useState } from 'react'
import Channels from './components/Channels'
import ArticleList from './components/ArticleList'
import MoreAction from './components/MoreAction'

export default function Home() {
  const userChannels = useSelector((state) => state.home.userChannels)
  const dispatch = useDispatch()
  const [active, setActive] = useState(0)
  const [drawerVisible, setDrawerVisible] = useState(false)

  const changeActive = (index) => {
    setActive(index)
  }
  useEffect(() => {
    dispatch(getUserChannels())
    dispatch(getAllChannels())
  }, [dispatch])

  return (
    <div className={styles.root}>
      <Tabs tabs={userChannels} index={active} onChange={changeActive}>
        {userChannels.map((ch) => (
          <ArticleList
            key={ch.id}
            channelId={ch.id}
            aid={userChannels[active].id}
          />
        ))}
      </Tabs>
      {/* 频道 Tab 栏右侧的两个图标按钮：搜索、频道管理 */}
      <div className="tabs-opration">
        <Icon type="iconbtn_search" />
        <Icon type="iconbtn_channel" onClick={() => setDrawerVisible(true)} />
      </div>
      {/* 频道管理抽屉 */}
      <Drawer
        className="my-drawer"
        sidebar={
          <Channels
            onClose={() => setDrawerVisible(false)}
            active={active}
            changeActive={changeActive}
          ></Channels>
        }
        children={''}
        open={drawerVisible}
      />

      {/* 显示删除弹层 */}
      <MoreAction activeChannelId={userChannels[active]?.id}></MoreAction>
    </div>
  )
}
